<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>评测平台密码修改</title>
    <!--&lt;!&ndash;<meta name="viewport" content="width=device-width,initial-scale=1">&ndash;&gt;-->
    <meta name="viewport" content="width=320,maximum-scale=1.3,user-scalable=no">
    <!--js文件-->
    <script src="./js/jquery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <!--样式文件-->
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <link rel="stylesheet" href="css/login.css">
</head>
<body class="open-style">
<!-- 主内容输入区 -->
<form action="" id="form1">
<div class="main-content">
    <table> 
        <tr>
            <td>原密码：</td>       
            <td> <input type="password" name="oldpwd" id="oldpasswords" onchange="passWord()"  placeholder="请输入原密码">
            <span class="warings" id="waring_1"></span>
            </td>
        </tr>
        <tr>
            <td>新密码：</td>
            <td> <input type="password" name="newpwd" placeholder="请输入新密码" onchange="passWords()" id="newpasswords" required="required"> 
                <span class="warings" id="waring_2" ></span>
            </td>
        </tr>
        <tr>
            <td>确认密码：</td>
            <td> <input type="password"  id="confirmwords" onblur="againWord()" placeholder="请确认新密码" required="required">
                <span class="warings" id="waring_3"></span>
            </td>
        </tr>
    </table>
</div>
</div>
<!-- 页脚区域 -->
<div class="footer-content">
  <input type="button" onclick="login()" data-toggle="modal" data-target=".alert-moudle" class="submits" value="确 认 修 改">
</div>
<!-- 模态弹出框 -->
<div class="modal fade bs-example-modal-sm alert-moudle" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
        <div class="modal-dialog modal-sm" role="document">
        <div class="modal-content">
            <div class="modal-header">
                    <a class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></a>
                    <h4 class="modal-title" id="myModalLabel">提示消息</h4>
            </div>
            <div class="modal-body" >
                请等待...
            </div>
        </div>
        </div>
    </div>
</form>
<script>
function check(id, reg, spanId, errorInfo) {
        var val = document.getElementById(id).value;
        var oSpanNode = document.getElementById(spanId);
        if (reg.test(val)) {
            oSpanNode.innerHTML="";
            return true
        } else {
            oSpanNode.innerHTML=errorInfo.fontcolor("#f40");
            return false
        }
    }
 // 原密码判空
 function passWord() {
                var val=document.getElementById("oldpasswords").value;
                var oSpanNode=document.getElementById("warining_1");
                if(val==""){oSpanNode.innerHTML=errorInfo.fontcolor("#f40");return false}
                else{ oSpanNode.innerHTML='';return true}
  }
function passWords(){
                    var reg = new RegExp("^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{6,16}$");
                    check("newpasswords", reg, "waring_2", "密码>6位，且英文加数字");
 }
 function againWord() {
                    var rp = document.getElementById("newpasswords").value;
                    var ps = document.getElementById("confirmwords").value;
                    var oSpanNodes = document.getElementById("waring_3");
                    if (rp == ps) {
                        oSpanNodes.innerHTML='';
                    }
                    else {
                        oSpanNodes.innerHTML = "请再次确认密码是否一致".fontcolor("#f40");
                    }
                }
// 提交表单
 function login() {
          
            $.ajax({
            //几个参数需要注意一下
                type: "POST",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/user/updatePwd" ,//url
                data: $('#form1').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.code == 200) {
                        $(".modal-body").text("修改成功！");
                        setTimeout(function(){$(".modal,.modal-backdrop").hide(); $('#form1')[0].reset()},2000);
                    }
                    else{
                        $(".modal-body").text("修改失败！");
                        setTimeout(function(){$(".modal,.modal-backdrop").hide()},1000)
                      
                    }
                },
                error : function() {
                    $(".modal-body").text("操作失败,请稍后再试！")
                }
            });
        }
</script>
</body>
</html>